<template>
  <div id="big_box">
    <div class="hander">
      <div class="hander_left"><span></span>商品列表</div>
      <div class="hander_right">
        <el-button size="mini" class="el-icon-refresh">刷新</el-button>
      </div>
    </div>
    <div class="nav">
      <div v-for="(item, index) in goodsState" :key="index" :class="('g1', currentIndex === index ? 'g1' : '')" @click="switchState(index)">{{ item.name }}({{ item.num }})</div>
    </div>
    <div class="search">
      <div class="search_top">
        <div class="search_top_left">
          <p>
            <i class="el-icon-search"></i>
            筛选查询
          </p>
        </div>
        <div class="search_top_right">
          <div class="shaixuan"><i class="el-icon-arrow-up"></i>收起筛选</div>
          <div class="jieguo">查询结果</div>
          <div class="sousuo">高级搜索</div>
        </div>
      </div>
      <div class="search_botton">
        <div class="search_botton1">
          输入搜索：
          <el-input v-model="goodsName" placeholder="商品名称/商品货号"></el-input>
        </div>
        <div class="search_botton2">
          商品分类：
          <div class="block">
            <el-cascader placeholder="请选择商品分类" :options="goodsClassify" :props="{ expandTrigger: 'hover', value: 'id', label: 'name', children: 'childs' }"></el-cascader>
          </div>
        </div>
        <div class="search_botton3">
          商品品牌：
          <div class="block">
            <el-cascader placeholder="请选择商品品牌" :options="goodsBrand" :props="{ expandTrigger: 'hover', value: 'id', label: 'name', children: 'childs' }"></el-cascader>
          </div>
        </div>
      </div>
    </div>
    <div class="goods_list">
      <div class="goods_list_top">
        <div class="goods_list_top1">
          <i class="el-icon-s-operation" />
          数据列表
        </div>
        <div class="goods_list_top2">
          <div class="change_msg">修改基本信息</div>
          <div class="change_details">修改商品详情</div>
          <div class="many">
            <div class="block">
              <el-cascader placeholder="显示条数" :options="showStrip" :props="{ expandTrigger: 'hover' }"></el-cascader>
            </div>
          </div>
          <div class="sort">
            <div class="block">
              <el-cascader placeholder="排序方式" :options="sortWay" :props="{ expandTrigger: 'hover' }"></el-cascader>
            </div>
          </div>
        </div>
      </div>
      <div class="goods_list_botton">
        <h3>无数据</h3>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goodsState: [],
      currentIndex: 0,
      goodsName: '',
      goodsClassify: [],
      goodsBrand: [],
      showStrip: [
        {
          value: '1',
          label: '11'
        }
      ],
      sortWay: []
    }
  },
  created() {
    this.getData()
    this.getState()
  },
  mounted() {},
  methods: {
    async getData() {
      const { data: res } = await this.$http.get('/category')
      if (res.code !== 200) {
        return
      }
      this.goodsClassify = res.data
      this.goodsBrand = res.data
    },
    async getState() {
      const { data: res } = await this.$http.get('/spu/findCount')
      // console.log(res)
      if (res.code !== 200) {
        return console.log('获取商品数据失败')
      }
      const abc = res.data
      // console.log(abc)
      for (let k in abc) {
        let a = { name: k, num: abc[k] }
        this.goodsState.push(a)
        // console.log(abc[k])
      }
      // console.log(this.goodsState)
      this.goodsState.forEach(e => {
        // console.log(e)
        if (e.name === 'addGoods') {
          e.name = '全部商品'
        } else if (e.name === 'onTable') {
          e.name = '已上架'
        } else if (e.name === 'offTable') {
          e.name = '未上架'
        } else if (e.name === 'wait') {
          e.name = '待审核'
        } else if (e.name === 'fail') {
          e.name = '未通过'
        }
      })
      // for (let k in abc) {
      //   let a = k
      //   if (k === 'addGoods') {
      //     k = '全部商品'
      //     this.goodsState[k] = abc[a]
      //   } else if (k === 'onTable') {
      //     k = '已上架'
      //     this.goodsState[k] = abc[a]
      //   } else if (k === 'offTable') {
      //     k = '未上架'
      //     this.goodsState[k] = abc[a]
      //   } else if (k === 'wait') {
      //     k = '待审核'
      //     this.goodsState[k] = abc[a]
      //   } else if (k === 'fail') {
      //     k = '未通过'
      //     this.goodsState[k] = abc[a]
      //   }
      // }
    },
    switchState(i) {
      this.currentIndex = i
      // console.log(this.currentIndex)
    }
  }
}
</script>

<style lang="less" scoped>
#big_box {
  .hander {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    height: 50px;
    font-size: 14px;
    background-color: #f3f3f3;
    border-bottom: 2px solid #e4e4e4;
    .hander_left {
      margin-left: 20px;
      display: flex;
      color: #999;
      line-height: 50px;
      span {
        display: block;
        margin-top: 15px;
        margin-right: 5px;
        width: 5px;
        height: 20px;
        background-color: #039aff;
      }
    }
    .hander_right {
      margin-right: 20px;
      line-height: 50px;
      color: #666;
      font-size: 14px;
      p {
        cursor: pointer;
        margin-top: 10px;
        padding: 0;
        width: 80px;
        height: 30px;
        background-color: #fff;
        line-height: 30px;
        &:hover {
          background-color: #ccc;
        }
      }
    }
  }
  .nav {
    .g1 {
      color: #409eff;
      background-color: #ecf5ff;
      // background-color: skyblue;
    }
    margin: 20px 0 20px;
    div {
      display: inline-block;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      background: #fff;
      border: 1px solid #dcdfe6;
      color: #606266;
      -webkit-appearance: none;
      text-align: center;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      outline: 0;
      margin: 0 10px;
      -webkit-transition: 0.3s;
      transition: 0.3s;
      padding: 12px 20px;
      font-size: 14px;
      border-radius: 4px;
    }
  }
  .search {
    padding: 0 20px;
    .search_top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      height: 50px;
      background-color: #f3f3f3;
      border: 1px solid #e4e4e4;
      .search_top_left {
        p {
          display: flex;
          align-items: center;
          padding: 0;
          color: #666;
          font-size: 14px;
          i {
            margin-right: 5px;
            font-size: 20px;
          }
        }
      }
      .search_top_right {
        display: flex;
        font-size: 12px;
        .shaixuan {
          cursor: pointer;
          display: flex;
          align-items: center;
          color: #999;
          margin-right: 15px;
          i {
            font-size: 18px;
          }
        }
        .sousuo {
          margin-left: -1px;
        }
        .jieguo,
        .sousuo {
          cursor: pointer;
          width: 80px;
          height: 30px;
          margin-left: 10px;
          line-height: 30px;
          text-align: center;
          background-color: #fff;
          border: 1px solid #ccc;
          border-radius: 4px;
          &:hover {
            background-color: #f2f2f2;
          }
        }
      }
    }
    .search_botton {
      display: flex;
      margin-top: -1px;
      height: 60px;
      line-height: 60px;
      font-size: 14px;
      color: #666;
      background-color: #fff;
      border: 1px solid #e4e4e4;
      .search_botton1,
      .search_botton2,
      .search_botton3 {
        display: flex;
        margin-left: 30px;
        .block,
        .el-input {
          width: 180px;
          height: 35px;
        }
      }
    }
  }
  .goods_list {
    padding: 0 20px;
    margin: 20px 0 20px;
    .goods_list_top {
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 20px;
      height: 50px;
      line-height: 50px;
      background-color: #f3f3f3;
      border: 1px solid #e4e4e4;
      .goods_list_top1 {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #666;
        i {
          margin-right: 5px;
          font-size: 20px;
        }
      }
      .goods_list_top2 {
        display: flex;
        align-items: center;
        .change_msg,
        .change_details {
          cursor: pointer;
          width: 100px;
          height: 30px;
          margin-right: 10px;
          line-height: 30px;
          text-align: center;
          font-size: 14px;
          background-color: #fff;
          border: 1px solid #ccc;
          border-radius: 5px;
          &:hover {
            background-color: #f2f2f2;
          }
        }
        .many,
        .sort {
          width: 110px;
          margin-left: 10px;
        }
      }
    }
    .goods_list_botton {
      margin-top: -1px;
      border: 1px solid #e4e4e4;
      background-color: #fff;
    }
  }
}
</style>
